<template>
  <div id="login" class="centering">
    <el-form
        ref="form"
        :model="form"
        status-icon
        :rules="rules"
    >
      <table class="inputBox">

        <tr>
          <td class="caption">
             電子契約システム
          </td>
        </tr>

        <tr>
          <td>
            <el-form-item
              prop="auth_id"
              label="認証ID"
              placeholder="認証ID"
            >
              <el-input
                v-model="form.auth_id"
                prefix-icon="el-icon-message"
                clearable
              ></el-input>
            </el-form-item>
          </td>
        </tr>

        <tr>
          <td>
            <el-form-item
              prop="login_id"
              label="メールアドレス / ログインID"
              placeholder="メールアドレス / ログインID"
            >
              <el-input
                v-model="form.login_id"
                prefix-icon="el-icon-message"
                clearable
              ></el-input>
            </el-form-item>
          </td>
        </tr>

        <tr>
          <td>
            <el-form-item
              prop="password"
              label="パスワード"
              placeholder="パスワード"
            >
              <el-input
                v-model="form.password"
                prefix-icon="el-icon-lock"
                show-password
                clearable
              ></el-input>
            </el-form-item>
          </td>
        </tr>

        <tr>
          <td class="rightside">
            <el-form-item>
              <el-checkbox label="ログインしたままにする" name="keep_session"></el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.prevent="login()">ログイン</el-button>
            </el-form-item>
            パスワードを忘れた方は
            <router-link to="/forgot_password">
              こちら
            </router-link>
          </td>
        </tr>

      </table>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'login',
  data () {
    return {
      form: {
        auth_id: '',
        login_id: '',
        password: '',
        keep_login: false
      },
      rules: {
        auth_id: [
          {required: true, message: '認証IDを入力してください', trigger: 'blur'}
        ],
        login_id: [
          {required: true, message: 'メールアドレス / ログインIDを入力してください', trigger: 'blur'}
        ],
        password: [
          {required: true, message: 'パスワードを入力してください', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    login () {
      this.$router.push({name: 'dashboard'})
    }
  }
}
</script>
<style scoped>
  @import '../../static/css/global.css';
  @import '../../static/css/login.css';
</style>
